<!--
 * @Description: 数据填报详情
 * @Author: qingyang
 * @Date: 2022-10-17 14:06:00
 * @LastEditors: qingyang
 * @LastEditTime: 2022-12-15 14:00:00
-->
<template>
  <div class="active-data-fill-container" v-loading="loading">
    <ContentHeader :title="adTaskDetail?.companyName" v-if="!props.hideTop">
      <template #desc>
        <span>数据周期：{{ empty(adTaskDetail?.fillPeriod) }}</span>
        <template v-if="isReadonly && !isOfficeFlag">
          <el-divider direction="vertical"></el-divider>
          <span>产量（台）：{{ empty(adTaskDetail?.yield) }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>生产天数（天）：{{ empty(adTaskDetail?.workDay) }}</span>
        </template>
      </template>
    </ContentHeader>
    <el-form
      ref="formRef"
      :model="formState"
      label-position="top"
      class="company-form"
      :rules="rules"
    >
      <el-row :gutter="20">
        <template v-if="!isReadonly && !isOfficeFlag">
          <el-col :span="8">
            <el-form-item label="产量(台)" prop="yield">
              <el-input
                type="number"
                v-model="formState.yield"
                placeholder="请输入"
                clearable
                v-positiveOnly:0
                @wheel.stop.prevent
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产天数(天)" prop="workDay">
              <el-input
                type="number"
                v-model="formState.workDay"
                placeholder="请输入"
                clearable
                v-positiveOnly:2
                @wheel.stop.prevent
              ></el-input>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <ContentCollapse :option="contentCollapseOption" ref="ContentCollapseRef">
      <template #SCOPE_ONE>
        <fill-table
          :data="table1"
          :readonly="isReadonly"
          @refresh="loadDataRow('table1', $event)"
        ></fill-table>
      </template>
      <template #SCOPE_TWO>
        <fill-table
          :data="table2"
          :readonly="isReadonly"
          @refresh="loadDataRow('table2', $event)"
        ></fill-table>
      </template>
      <template #SCOPE_THREE>
        <fill-table
          :data="table3"
          :readonly="isReadonly"
          @refresh="loadDataRow('table3', $event)"
        ></fill-table>
      </template>
      <template #FILE>
        <fill-file :isReadonly="isReadonly" v-model:fileList="fileList"></fill-file>
      </template>
    </ContentCollapse>
  </div>
</template>
<script lang="ts">
export default {
  name: 'ActiveDataFill'
};
</script>
<script lang="ts" setup>
import { ref, inject, defineProps, defineEmits, defineExpose, computed } from 'vue';
import ContentHeader from '../../components/ContentHeader/index.vue';
import ContentCollapse from '../../components/ContentCollapse/index.vue';
import FillTable from './components/FillTable.vue';
import FillFile from './components/FillFile.vue';
import { useActiveDataFill } from './useActiveDataFill';
import { TODO_DETAIL_ROOT } from '../../types';
import type { TodoDetailRootProvider } from '../../types';
import { empty } from '@/utils';
import { TodoTaskStatusEnum, TaskDefinitionKeyActiveFillEnum } from '@/constants/enum';

interface ActiveDataFillProps {
  businessKey: string;
  /**
   * 只读
   */
  isReadonly?: boolean;
  /**
   * 隐藏头部信息
   */
  hideTop?: boolean;
}
const props = defineProps<ActiveDataFillProps>();
const emits = defineEmits(['loadedSuccess']);
const { pageType, processInfo } = (inject(TODO_DETAIL_ROOT) as TodoDetailRootProvider) || {};

const isReadonly = computed(() => {
  return (
    props.isReadonly ||
    pageType == TodoTaskStatusEnum.PROCESSED ||
    pageType == TodoTaskStatusEnum.SUBMITTED ||
    processInfo?.value?.taskDefinitionKey !== TaskDefinitionKeyActiveFillEnum.ACTIVITY_DATA_FILL
  );
});

const rules = {
  yield: [
    {
      required: true,
      message: '请输入',
      trigger: ['submit', 'blur', 'change']
    }
  ],
  workDay: [
    {
      required: true,
      message: '请输入',
      trigger: ['submit', 'blur', 'change']
    }
  ]
};

const ContentCollapseRef = ref();
/**
 * 折叠面板配置
 */
const contentCollapseOption = ref({
  collapseOptions: [
    {
      title: '附件',
      key: 'FILE',
      defaultOpened: true
    }
  ]
});

function handleUpdateCollapseOptions(options: any[]) {
  let fileOption = [];
  if (!isReadonly.value || fileList.value.length) {
    fileOption.push({
      title: '附件',
      key: 'FILE',
      defaultOpened: true
    });
  }
  ContentCollapseRef.value?.updateCollapseOptions &&
    ContentCollapseRef.value?.updateCollapseOptions([...options, ...fileOption]);
}

const {
  formState,
  formRef,
  fileList,
  table1,
  table2,
  table3,
  adTaskDetail,
  handleSubmit,
  loadData,
  loadDataRow,
  isOfficeFlag
} = useActiveDataFill(props.businessKey, handleUpdateCollapseOptions, handleGetDataSuccess);
const loading = ref(false);

function handleGetDataSuccess() {
  emits('loadedSuccess', adTaskDetail);
}

function submit(needValidForm = true) {
  return handleSubmit(needValidForm);
}

defineExpose({
  submit
});
</script>
<style lang="scss" scoped>
.active-data-fill-container {
  padding: 32px 32px 0;
  // padding-bottom: 72px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.company-form {
  // border-top: 1px solid #ebeef5;
  // padding: 16px 24px 20px;
  :deep(.el-form-item) {
    // margin-bottom: 0;
  }
  .form-span {
    font-size: 14px;
    color: #6c757d;
    line-height: 32px;
  }
  .import-wrap {
    background: #f6f9fa;
    border-radius: 4px;
    padding: 16px 24px 20px;
  }
}
</style>
